<template>
  <div>
    <div>
      <!--      新建/edit角色弹窗开始-->
      <el-button type="primary" @click="dialogFormVisible = true">+ 新建</el-button>

      <el-dialog title="新建角色" :visible.sync="dialogFormVisible"  :close-on-click-modal='false' :show-close="false">
        <el-form :model="roleForm" :rules="rules" ref="roleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="角色名称" prop="lxRoleName">
            <el-input v-model="roleForm.lxRoleName"></el-input>
          </el-form-item>

          <el-form-item label="角色类型" prop="lxRoleType">
            <el-input v-model="roleForm.lxRoleType"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="lxRoleDetail">
            <el-input type="textarea" v-model="roleForm.lxRoleDetail"></el-input>
          </el-form-item>
          <el-form-item label="角色状态" prop="lxRoleStatus">
            <el-select v-model="roleForm.lxRoleStatus" placeholder="请选择角色状态">
              <el-option label="启用" value="1"></el-option>
              <el-option label="停用" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('roleForm')">保存</el-button>
            <el-button @click="resetForm('roleForm')">取消</el-button>
          </el-form-item>
        </el-form>
        <!--        <div slot="footer" class="dialog-footer">-->
        <!--          <el-button @click="dialogFormVisible = false">取 消</el-button>-->
        <!--          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>-->
        <!--        </div>-->
      </el-dialog>
      <!--      新建角色弹窗end-->
      <!--      角色授权弹框开始-->

      <el-dialog
        title="授权"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
        <span>
          <el-form :model="RoleMenuForm" :rules="rules" ref="RoleMenuForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="角色权限" prop="">
              <el-tree
                ref="tree"
                :data="menuList"
                @node-change="handleNodeClick"
                show-checkbox
                node-key="id"
                default-expand-all
                :default-checked-keys="RoleMenuForm.lxMenuId"
                :props="{children: 'children',label: 'label'}">
              </el-tree>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitMenuForm(RoleMenuForm)">确 定</el-button>
        </span>
      </el-dialog>
      <!--  角色授权弹框end    -->
<!--      <el-select v-model="value" placeholder="角色">-->
<!--        <el-option-->
<!--          v-for="item in options"-->
<!--          :key="item.value"-->
<!--          :label="item.label"-->
<!--          :value="item.value">-->
<!--        </el-option>-->
<!--      </el-select>-->
<!--      <el-input-->
<!--        style="width: 220px;margin-left: 20px"-->
<!--        placeholder="请输入姓名"-->
<!--        v-model="input"-->
<!--        clearable>-->
<!--      </el-input>-->

    </div>
    <div style="margin: 20px 0;"></div>
<!--table-->
    <el-table
      ref="multipleTable"
      border
      :data="roleList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">

      </el-table-column>
      <el-table-column
        prop="date"
        label="序号"
        width="80">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="lxRoleType"
        label="角色类型"
        width="180">
      </el-table-column>
      <el-table-column
        prop="lxRoleName"
        label="角色名称">
      </el-table-column>
      <el-table-column
        prop="lxRoleDetail"
        label="角色描述">
      </el-table-column>
      <el-table-column
        prop="lxRoleStatus"
        label="角色状态">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.lxRoleStatus==1">已启用</el-tag>
          <el-tag type="danger" v-if="scope.row.lxRoleStatus==2">已停用</el-tag>

        </template>
      </el-table-column>


      <el-table-column
        label="操作"
        width="220">
        <template slot-scope="scope">
          <el-button @click="updateClick(scope.row)" size="small"
                     :disabled="scope.row.id==1||scope.row.id==2||scope.row.id==3">编辑</el-button>
          <el-button @click="handleRoleClick(scope.row)" type="warning" size="small" :disabled="scope.row.id==1">授权</el-button>
          <el-button @click="handleDeleteClick(scope.row)" type="danger" size="small"
                     :disabled="scope.row.id==1||scope.row.id==2||scope.row.id==3">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {

  data() {
    return {
      roleList: [{
        id: "",
        lxRoleType: "",
        lxRoleName: "",
        lxRoleDetail: "",
        lxRoleStatus: ""
      }],
      roleForm: {
        id: "",
        lxRoleType: "",
        lxRoleName: "",
        lxRoleDetail: "",
        lxRoleStatus: ""
      },
      roleFormInit: {
        id: "",
        lxRoleType: "",
        lxRoleName: "",
        lxRoleDetail: "",
        lxRoleStatus: ""
      },
      RoleMenuForm: {  //角色权限表单
        id: "",
        lxMenuId: [],
        lxRoleId: ""
      },

      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }],
      value: '',
      input: '',
      // 默认选中选中节点Id值的数组
      centerDialogVisible: false, //授权弹框
      rules: {  //表单验证规则
        lxRoleType: [
          {required: true, message: '请输入角色类型', trigger: 'blur'},
          {min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'blur'}
        ],
        lxRoleName: [
          {required: true, message: '请输入角色名称', trigger: 'blur'}
        ],
        lxRoleStatus: [
          {required: true, message: '请选择角色状态', trigger: 'blur'}
        ],
        lxMenuList: [
          {type: 'array', required: true, message: '请至少选择一个权限', trigger: 'blur'}
        ],
        resource: [
          {required: true, message: '请选择活动资源', trigger: 'blur'}
        ],
        lxRoleDetail: [
          {required: true, message: '请填写角色描述', trigger: 'blur'}
        ]
      },
      dialogFormVisible: false,

      formLabelWidth: '120px',
      menuList: {  //左侧菜单列表
        id: '',
        lxMenuName: '',
        lxOrder: "",
        lxFather: '',
        lxIcon: '',
        lxLink: '',
        childMenu: [{
          id: '',
          lxMenuName: '',
          lxOrder: "",
          lxFather: '',
          lxIcon: '',
          lxLink: '',
        }],
      },
    }
  },
  mounted() {
    this.$emit('getMessage', ["人员管理","角色管理"]);
    this.load();
  },

  methods: {
    load() {
      this.$http.post('/userrole/index').then(res => {
        this.roleList = res.data.data;
        console.log("res", res)
        console.log("this.roleList", this.roleList)
      });
      this.$http.post('/menu/node').then(res => {
        this.menuList = res.data.data;
        console.log("res", res)
        console.log("this.menuList", this.menuList)
      });


    },  //load结束
    handleNodeClick() {  //获取菜单权限
      let res = this.$refs.tree.getCheckedNodes()
      console.log(res)
      this.RoleMenuForm.lxMenuList = res;
    },
    closeDialog(){
      this.roleForm= {...this.roleFormInit}
      this.dialogFormVisible=false
    },
    updateClick(rows){
      console.log("updateClick",rows)
      this.roleForm={...rows};
      console.log("updateClick,roleForm",this.roleForm)
      this.dialogFormVisible=true;
    },
    submitForm(roleForm) {  //添加/更新角色
      this.$refs[roleForm].validate((valid) => {
        if (valid) {
        console.log("roleForm",this.roleForm);
          this.$http.post('/userrole/saveOrUpdate',this.roleForm).then(res=>{
            console.log("res",res)
            this.load();

            if (res.data.state==200){
              this.$refs[roleForm].resetFields();
              setTimeout(this.$message({
                message: '操作成功',
                type: 'success'
              }),1000)

            }else {
              this.$message.error('操作失败');
            }
          });

          this.closeDialog()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.closeDialog()
    },
    handleClose(){
      console.log("handleClose")
      this.$nextTick(() => {
        console.log("handleClose,resetFields")
        this.$refs.roleForm.resetFields() // CheckedArr 一个选中的数组element Ui的东西，关键是看$nextTick的用法
      })

    },
    handleRoleClick(rows) { //点击打开授权窗口
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys([]) // CheckedArr 一个选中的数组element Ui的东西，关键是看$nextTick的用法
      })
      console.log("rows",rows.id)
      var lxRoleId=rows.id
      console.log("lxRoleId",lxRoleId)

      this.$http.post('/rolemenu/findByRoleId', lxRoleId).then(res => {

        console.log("res", res)
        this.RoleMenuForm={...res.data.data}
        console.log("res.data.data.lxMenuList", res.data.data.lxMenuId)

        this.centerDialogVisible = true;
        console.log("this.RoleMenuForm", this.RoleMenuForm)
      });
    },
    submitMenuForm(RoleMenuForm){ //提交已选择的菜单列表
      //this.centerDialogVisible = false
      let menuChecked = this.$refs.tree.getCheckedKeys()
      console.log("menuChecked",menuChecked)
      console.log("添加/更新"+this.RoleMenuForm)
      this.RoleMenuForm.lxMenuId=menuChecked;
      this.$http.post('/rolemenu/addOrUpdate', this.RoleMenuForm).then(res => {
        console.log("/rolemenu/addOrUpdate", res)
        if (res.data.state==200){
          this.$message({
            message: '操作成功',
            type: 'success'
          });
        }else {
          this.$message.error('操作失败');
        }
        this.centerDialogVisible=false
      });

    },
    handleDeleteClick(rows){  //删除角色
      console.log("delete rows",rows);
      var id=rows.id
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("postid",id)
        this.$http.post('/userrole/delete',id).then(res=>{
          console.log("res",res)
          this.load()
          if (res.data.state==200){ //成功删除弹窗
            setTimeout(this.$message({
              type: 'success',
              message: '删除成功!'
            }),1000)


          }else {
            this.$message.error('删除失败！');
          }

        });


      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    handleSubCat(value) {
      // 获取value值
      console.log(value)
      // 获取label 值
      console.log(this.$refs["menuSelected"].getCheckedNodes()[0].label)
    },
  }
}
</script>

<style scoped>

</style>
